import React from 'react';
import { Tree, Menu, Dropdown, Popconfirm, message } from 'antd';
const { DirectoryTree } = Tree;
class Session extends React.Component {
    state = {
        expandedKeys: ['0-0-0', '0-0-1'],
        autoExpandParent: true,
        checkedKeys: ['0-0-0'],
        selectedKeys: [],
    };
    render() {

        const treeData = [
            {
                title: 'parent 0',
                key: '0-0',
                children: [
                    {
                        title: 'leaf 0-0',
                        key: '0-0-0',
                        isLeaf: true,
                    },
                    {
                        title: 'leaf 0-1',
                        key: '0-0-1',
                        isLeaf: true,
                    },
                ],
            },
            {
                title: 'parent 1',
                key: '0-1',
                children: [
                    {
                        title: 'leaf 1-0',
                        key: '0-1-0',
                        isLeaf: true,
                    },
                    {
                        title: 'leaf 1-1',
                        key: '0-1-1',
                        isLeaf: true,
                    },
                ],
            },
        ];

        const onSelect = (keys, info) => {
            console.log('Trigger Select', keys, info);
            let selectedKeys = []
            selectedKeys = selectedKeys.concat(keys);
            this.setState({ selectedKeys });
            console.log('Trigger Select', selectedKeys);
        };

        const onExpand = () => {
            console.log('Trigger Expand');
        };

        const onRightClick = (event, node) => {
            console.log(event, node);
            let selectedKeys = Array.from(this.state.selectedKeys)
            if (!selectedKeys.includes(event.node.key)) {
                selectedKeys.push(event.node.key)
            }
            this.setState({ selectedKeys });
            treeData.flatMap((e) => {
                console.log(`${JSON.stringify(e)}`)
                return []
            })

        }

        const onDeleteHost = () => {
            console.log('delete key', this.state.selectedKeys)
        }
        const onDeleteHostCancel = (e) => {

        }
        const onDeleteHostConfirm = () => {
            if (this.state.selectedKeys.length === 0) {
                message.warn('请先选中要删除的主机')
            } else {
                console.log('delete key', this.state.selectedKeys)
            }

        }
        const menu = (
            <Menu>

                <Menu.Item key="1" onClick={onDeleteHost}>
                    <Popconfirm
                        title={`确认删除主机${this.state.selectedKeys.length}个主机?`}
                        onConfirm={onDeleteHostConfirm}
                        onCancel={onDeleteHostCancel}
                        okText="是"
                        cancelText="不删了"
                    >
                        删除
                    </Popconfirm>
                </Menu.Item>

                <Menu.Divider />
                <Menu.Item key="2">属性...</Menu.Item>
            </Menu>
        );
        return (
            <div>

                <Dropdown overlay={menu} trigger={['contextMenu']}>
                    <DirectoryTree
                        className="session-manager-height"
                        multiple
                        onRightClick={onRightClick}
                        defaultExpandAll
                        selectedKeys={this.state.selectedKeys}
                        onSelect={onSelect}
                        onExpand={onExpand}
                        treeData={treeData}
                    />
                </Dropdown>
            </div>

        );
    }
}

export default Session